/* 
1页面数据渲染
    1 定义一个函数
    2发送请求获取数据 渲染页面
2 点击修改数据
*/
async function getScore() {
    const res = await axios({
        url: '/score/list',
    })

    console.log(res);
    //创建模板字符串
    let html = ''
    //遍历对象
    $.each(res.data.data, function (key, value) {
        const { name, score } = value
        html += `
        <tr>
          <th scope="row">${key}</th>
          <td>${name}</td>
          <td class="score" data-stu_id="${key}" data-batch="1">${score[0]}</td>
          <td class="score" data-stu_id="${key}" data-batch="2">${score[1]}</td>
          <td class="score" data-stu_id="${key}" data-batch="3">${score[2]}</td>
          <td class="score" data-stu_id="${key}" data-batch="4">${score[3]}</td>
          <td class="score" data-stu_id="${key}" data-batch="5">${score[4]}</td>
        </tr>
        `
    })
    //追加到tbody
    $('tbody').html(html)
}
getScore()
//双击出现输入框
$('tbody').on('dblclick', '.score', function (e) {
    if ($('tbody').find('input').length < 1) {
        const input = $(`<input type="text" value="${$(this).text()}">`)
        $(this).append(input)
        input.show()
        input.focus()
    }
})
//失焦更改数据
$('tbody').on('blur', 'input', async function () {
    //获取参数 发送请求，完成修改
    //获取参数 id、第几次成绩、分数
    const { stu_id, batch } = $(this).parent().data()
    const score = $(this).val()
    console.log(score);
    if (score === 'null') {
        $(this).remove()
        return
    }
    //发送请求
    const res = await axios({
        url: '/score/entry',
        method: 'post',
        data: { stu_id, batch, score }
    })
    //修改成功
    if (res.data.code === 0) {
        toastr.success(res.data.message, '成功')
        //刷新
        getScore()
    }

})
//键盘按下事件
$('tbody').on('keyup', 'input', function (e) {
    if (e.keyCode === 13) {
        $(this).blur()
    }
})


